<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div id="login">
        <div class="content"><input class="content_text" type="text" v-model="username" placeholder="用户名"></div>
        <div class="content"><input class="content_text" type="password" v-model="pwd" placeholder="密码"></div>
        <div class="content"><input class="content_text" type="name" v-model="name" placeholder="姓名"></div>
        <div class="content" id="btn_login" @click="registry">注册</div>
    </div>
    <div id="bar">
        <div id="bar_title">Vue实训-注册功能</div>
    </div>
    <div id="shadow">

    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            username:'',
            pwd:''
        },
        methods:{
            registry(){
                $.ajaxSetup({
                    contentType:'application/json;charset=utf-8'
                })
                var data = {'loginName':this.username,'pwd':this.pwd, 'name':this.name}
                $.post("http://api.tutestudio.net/api/reg", JSON.stringify(data), function(res){
                    if(res.code == 200){
                        alert('注册成功！');
                        location.href = 'login.html'
                    }else {
                        alert('注册失败！'+res.msg+'！');
                    }
                })

            }
        }
    })
</script>
</html>